/* global AMap Loca */
import React, { useEffect, useRef, useState } from 'react'
import styles from '../index.module.less';
import _cloneDeep from 'lodash/cloneDeep';

export default function Map(props) {
    const [map, setMap] = useState();
    useEffect(() => {
        initMap();
    }, []);

    function initLayer(map) {
        var loca = new Loca.Container({
            map,
        });
        var geo = new Loca.GeoJSONSource({
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        geometry: {
                            type: 'Polygon',
                            coordinates: [props.coordinates]
                        }

                    }
                ]
            }
        });
        var pl = new Loca.PolygonLayer({
            loca,
            zIndex: 120,
            opacity: 0.8,
            // cullface: 'none',
            shininess: 10,
            hasSide: true,
        });
        // pl.setStyle({
        //     topColor: '#00873A',
        //     height: 10
        // })
        pl.setSource(geo);
        loca.add(pl);
    }

    function initMap() {
        const map = new AMap.Map('amap', {
            resizeEnable: true,
            zoom: 8,
            center: [116.397428, 39.90923],
            viewMode: '3D'
        });
        map.plugin(['AMap.ToolBar'],function(){
            //加载工具条
            var tool = new AMap.ToolBar();
            map.addControl(tool);
        });
        setMap(map);
        initLayer(map);
    }

    return (
        <div id="amap" className={styles.amap}></div>
    )
}
